<template>
  <div>
    <!--    <el-button type="primary" @click="delrouterall()">click</el-button>-->
<!--    <el-button type="primary" @click="test()">click</el-button>-->


    <div style="margin: 50px 0; height: 35px">

      <div style="float: left;  font-size: 14px">
        单位<el-cascader
            style="margin-left: 10px; margin-right: 20px; width: 255px; "
            placeholder="请选择单位"
            ref="dwref"
            v-model="dwpath"
            @change="dwchange"
            :options="dwoptions"
            :props="{ expandTrigger: 'hover', checkStrictly: true, label: 'dwname', value:'id', emitPath: true }"
            clearable>
        </el-cascader>
        井号
        <el-select v-model="jh" filterable placeholder="请输入井号" style="margin-right: 20px">
          <el-option
              v-for="item in jhs"
              :key="item"
              :label="item"
              :value="item">
          </el-option>
        </el-select>
        起止日期<el-date-picker
          style="margin-left: 10px; margin-right: 20px; "
            v-model="datearr"
            type="datetimerange"
            value-format = "yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
        </el-date-picker>
        类型<el-select v-model="qxlxvals"  multiple filterable placeholder="请选择" style="margin-left: 10px; margin-right: 20px">
          <el-option
              v-for="item in qxlxs"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <el-button style="margin-left: 20px;margin-right: 10px" type="primary" @click="search">搜索</el-button>
      </div>
    </div>
    <QX  v-for="(item, index) in chart_options" :key="index" :chart_option="item" ></QX>
  </div>

</template>
<script>
import service from "@/utils/request";
import ElementUI from "element-ui";

import VueRouter from 'vue-router'
import HomeView from "@/views/HomeView.vue";
import {formatDateTime} from "@/utils/formatDateTime";
import * as echarts from "echarts";
import QX from '@/components/QX.vue';

export default {
  components: {QX},
  created() {
    this.queryjh = this.$route.query.jh
  },
  activated() {
    this.queryjh = this.$route.query.jh
    // this.querydwid = this.$route.query.dwid
    service.get('/dw/getAll', {}).then(
        response => {
          if (response.data.code == 20000) {
            this.dwoptions = response.data.data
            return service.get('/yjxx/getDwByJh', {params: {jh: this.queryjh}})
          }
        }
    ).then(
        response => {
          if(response.data.code == 20000){
            let dwid = response.data.data
            service.get('/dw/getPathByid', {params: {id: dwid}}).then(
                response => {
                  if (response.data.code == 20000) {
                    this.dwpath = response.data.data
                  }
                }
            )
            return service.get('/yjxx/getjhsBydw', {params: {dwid}})
          }
        }
    ).then(
        response => {
          if (response.data.code == 20000) {
            this.jhs = response.data.data
            this.jh = this.queryjh
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 );
            let starttime = formatDateTime(start, "yyyy-MM-dd HH:mm:ss")
            let endtime = formatDateTime(end, "yyyy-MM-dd HH:mm:ss")
            // console.log
            this.datearr=[starttime,endtime]
            this.load();
          }
        }
    )
  },
  data() {
    return {
      qxlxvals: ['回压', '套压','加药罐液位'],
      qxlxs: [
          // {
          //   value: '全部',
          //   label: '全部'
          // },
          {
            value: '回压',
            label: '回压'
          },
          {
            value: '套压',
            label: '套压'
          },
          {
            value: '温度',
            label: '温度'
          },
          {
            value: '含水',
            label: '含水'
          },
          {
            value: '加药罐液位',
            label: '加药罐液位'
          }

      ],
      queryjh: null,
      querydwid: null,
      jh: null,
      jhs: [],
      startdate: null,
      endate: null,
      dwoptions: [],
      dwpath: [],

      devname: null,
      show: true,

      pickerOptions: {
        shortcuts: [ {
          text: '最近一天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 );
            picker.$emit('pick', [start, end]);
          }
        },{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }]
      },

      datearr: [],
      chart_option: {
        title: {
          text: '',
          // textAlign: 'auto',
          left: 'center',
        },
        // 用dataset设置
        dataset: {
          // dimensions: [{name: 'empno', type: 'number' }, {name: 'ename' },{name: 'job' },{name: 'mgr' },{name: 'hiredate' },{name: 'sal',type: 'number' }],
          // dimensions: [ 'empno', 'ename' , 'job' ,'mgr', 'hiredate','sal', 'comm', 'deptno'],
          source: [
            // ['2020-02-01 10:10:10',100],
            // ['2020-02-01 10:12:10',20],
          ]

        },
        xAxis: {
          type: 'time',
          name: '采集时间',
          axisLabel: {
            //  坐标轴显示最大最小值
            show: true,
            showMaxLabel: true,
            showMinLabel: true,
            formatter: '{yyyy}-{MM}-{dd} {HH}:{mm}',
          }

        },
        yAxis: {
          axisLabel: {
            //  坐标轴显示最大最小值
            show: true,
            showMaxLabel: true,
            showMinLabel: true,
            formatter: '{value}%',
          }
        },

        series: [
          {
            type: 'line',
            // smooth: true,
            // areaStyle: {},
            encode: {
              x: 'cjsj',
              y: 'sshsl'
            },
            // label: {
            //   show: true,
            // },
            // emphasis: {
            //   label: {
            //     show: true
            //   }
            // }
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
      },
      chart_options: [],
      msg: 1

    }
  },
  methods: {
    test() {
      console.log(this.$router)
      this.msg++
      console.log(this.qxlxvals)
      console.log(this.chart_options)
    },
    load() {
      if(this.jh == null || this.jh == '' || this.datearr == null || this.datearr.length == 0)
        return
      service.get('/yjss/gethistoryByjh', {
        params: {
          jh: this.jh,
          startdate: this.datearr[0],
          enddate: this.datearr[1],
        }
      }).then(response => {
            if (response.data.code == 20000) {
              this.chart_option.dataset.source = response.data.data
              while(this.chart_options.length>0){
                this.chart_options.pop()
              }
              if(this.qxlxvals.some(item=>item.value=='全部')){
                console.log("quanbu")

              }else{

                for(let i=0; i<this.qxlxvals.length; i++) {
                  if (this.qxlxvals[i] == '回压') {
                    console.log("huiya copy")
                    // this.chart_options[i] = structuredClone(this.chart_option)
                    let o = structuredClone(this.chart_option)
                    // console.log(o)
                    o.yAxis.name = '回压'
                    o.yAxis.axisLabel.formatter = '{value}mpa'
                    o.series[0].encode =
                        {
                          x: 'cjsj', y: 'jkHy'
                        }
                    o.title.text = this.jh + '回压'
                    this.chart_options.push(o)
                  } else if (this.qxlxvals[i] == '套压') {
                    let o = structuredClone(this.chart_option)
                    console.log(o)
                    o.yAxis.name = '套压'
                    o.yAxis.axisLabel.formatter = '{value}mpa'
                    o.series[0].encode =
                        {
                          x: 'cjsj', y: 'jkTy'
                        }
                    o.title.text = this.jh + '套压'
                    this.chart_options.push(o)
                  } else if (this.qxlxvals[i] == '温度') {
                    let o = structuredClone(this.chart_option)
                    console.log(o)
                    o.yAxis.name = '温度'
                    o.yAxis.axisLabel.formatter = '{value}C'
                    o.series[0].encode =
                        {
                          x: 'cjsj', y: 'jkWd'
                        }
                    o.title.text = this.jh + '温度'
                    this.chart_options.push(o)
                  } else if (this.qxlxvals[i] == '含水') {
                    let o = structuredClone(this.chart_option)
                    o.yAxis.name = '含水'
                    o.yAxis.axisLabel.formatter = '{value}C'
                    o.series[0].encode =
                        {
                          x: 'cjsj', y: 'hsl'
                        }
                    o.title.text = this.jh + '含水'
                    this.chart_options.push(o)
                  }else if(this.qxlxvals[i] == '加药罐液位'){
                    let o = structuredClone(this.chart_option)
                    o.yAxis.name = '加药罐液位'
                    o.yAxis.axisLabel.formatter = '{value}CM'
                    o.series[0].encode =
                        {
                          x: 'cjsj', y: 'jygYw'
                        }
                    o.title.text = this.jh + '加药罐液位'
                    this.chart_options.push(o)
                  }
                }
              }
              console.log(this.chart_options)
              // this.showHSChart()
            }else{
              this.$message.error(response.data.message)
            }
          },
          error => {
            // this.$message.error("err")
            ElementUI.Message({
              message: error.message,
              type: 'error'
            })
          }
      );
    },
    showHSChart(){
      let myChart = echarts.init(this.$refs.sshsl);
      this.chart_option.yAxis.name = '含水率'
      this.chart_option.yAxis.axisLabel.formatter = '{value}%'
      this.chart_option.series[0].encode =
          {
            x: 'cjsj', y: 'hsl'
          }
      this.chart_option.title.text = this.jh+'实时含水率'
      myChart.setOption(this.chart_option);
    },
    //根据单位级联查询该单位下的井号，显示在下拉框
    dwchange(dw) {
      console.log(dw)
      service.get('/yjxx/getjhsBydw', {
        params: {
          dwid: dw[dw.length - 1]
        }
      }).then(
          response => {
            if (response.data.code == 20000) {
              this.jhs = response.data.data;
              this.jh = ''
            }
          }
      )
    },

    search() {
      this.load()
    }
  }
}
</script>

<style scoped>

</style>
